<template>
  <div>
    <div v-if="statusName=='已驳回'" class="insufficient_space">
      <svg-icon icon-class="驳回" />
      已驳回
    </div>
    <div v-if="statusName=='已撤销'" class="revoke_space">
      <svg-icon icon-class="撤销" />
      已撤销
    </div>
    <div v-if="statusName=='已发货'" class="adequate_space">
      <svg-icon icon-class="通过" />
      已发货
    </div>
    <div v-if="statusName=='已通过'" class="adequate_space">
      <svg-icon icon-class="通过" />
      已通过
    </div>
    <div v-if="statusName=='草稿' " class="revoke_space">
      <svg-icon icon-class="草稿" />
      <span>草{{ '\xa0\xa0\xa0' }}稿</span>
    </div>
    <div v-if="statusName=='审批中' ||statusName=='待发货' " class="insufficient_space2">
      <svg-icon icon-class="不足" />
      {{ statusName }}
    </div>
    <div v-if="statusName=='已读'" class="adequate_space">
      <svg-icon icon-class="通过" />
      已读
    </div>
<!--    <div v-if="statusName=='未读' && isGray == '1'" class="insufficient_space1">-->
<!--      <svg-icon icon-class="未读" />-->
<!--      未读-->
<!--    </div>-->
  </div>
</template>
<script>
export default {
  name: 'StatusColumn',
  props: {
    statusName: { // 列标题 必须
      type: String,
      required: true
    },
    // isGray: { // 列标题 必须
    //   type: String,
    //   required: true
    // }
  }
}
</script>

<style scoped>
.adequate_space{
  color: #19BE6B;
  background-color:rgb(223, 249, 241) ;
  border-radius: 3px;
  padding: 3px 0;
  width: 80px;
  text-align: center;
}
.insufficient_space{
  color: rgb(231,108,108);
  background-color:rgb(255,238,238) ;
  border-radius: 3px;
  padding: 3px 0;
  width: 80px;
  text-align: center;
}
.insufficient_space1{
  color: rgb(152,153,161);
  background-color:rgb(242,242,242) ;
  border-radius: 3px;
  padding: 3px 0;
  width: 80px;
  text-align: center;
}
.insufficient_space2{
  color: rgb(255,151,32);
  background-color:rgb(255,245,239) ;
  border-radius: 3px;
  padding: 3px 0;
  width: 80px;
  text-align: center;
}
.revoke_space{
  color: #999999;
  background-color:rgb(242,242,242) ;
  border-radius: 3px;
  padding: 3px 0;
  width: 80px;
  text-align: center;
}
</style>
